<style lang="scss">
	@import "../../common/style/list.scss";
	// 定义变量
	$width: 45%;

	// 混合语法
	@mixin header_common {
		width: 100%;
		display: flex;
		justify-content: center;
		font-weight: bold;
		text-shadow: 2px 1px 2px #000;
	}

	.usage {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0;
		z-index: 5;
		background-color: #fff;

		.img {
			width: 100%;
			height: 100%;
		}

		.tip {
			text-align: center;
			color: #06A17E;
			font-weight: bold;
			padding: 30rpx 0rpx;
			font-size: 40rpx;
		}
	}

	.index {
		padding: 80rpx 30rpx 120rpx;
	}

	.index-header .header-top {
		@include header_common();
		font-size: 50rpx;
	}

	.index-header .header-top .top-left {
		color: #F91313;
	}

	.index-header .header-top .top-right {
		color: #0971EE;
	}

	.index-header .header-bottom {
		@include header_common();
		background-color: #06A17E;
		color: #FFFFFF;
		border-radius: 20rpx;
		padding: 4rpx 0rpx;
		font-size: 72rpx;
		margin-top: 20rpx;
	}

	.index-header .t {
		margin: 0rpx 10rpx;
	}


	.index-button {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.index-button .w-50 {
		width: $width;
		border: 1px solid transparent;
	}

	.index-button [class^='btn'] {
		margin-top: 20rpx;
		width: 100%;
		height: 90rpx;
		border-radius: 20rpx;
		color: #FFF;
		font-size: 46rpx;
		font-weight: bold;
		line-height: 90rpx;
		text-shadow: 2px 2px 2px #000;
		outline: none;
	}


	.index-button .btn-red {
		background-color: #F91313;
	}

	.index-button .btn-blue {
		background-color: #0971EC;
	}

	.index-num {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.index-num [class^="num"] {
		width: $width;
		border: 1px solid transparent;
	}

	.index-num .box {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		position: relative;
		background-color: #06A17E;
		padding: 0rpx 60rpx;
		box-sizing: border-box;
		text-align: center;
		border-radius: 10rpx;
	}

	.index-num .box .l,
	.index-num .box .r {
		position: absolute;
		top: 15rpx;
		width: 60rpx;
		height: 60rpx;
		z-index: 2;
	}

	.index-num .box .l {
		left: 10rpx;
	}

	.index-num .box .r {
		right: 10rpx;
	}

	.index-num .box .l .btn,
	.index-num .box .r .btn {
		width: 60rpx;
		height: 60rpx;
		line-height: 55rpx;
		font-size: 50rpx;
		font-weight: bold;
		border-radius: 10rpx;
		box-shadow: 0px 0px 2px #ccc;
		padding: 0;
	}

	.index-num .box .c {
		color: #fff;
		font-size: 26rpx;
	}

	.index-num .box-2 {
		margin-top: 20rpx;
		background-color: #06d19f;
	}

	.index-time {
		width: 100%;
		margin-top: 20rpx;
		// background-color: red;
	}

	.index-time .time-title {
		text-align: center;
		padding: 10rpx 0rpx;
		color: #06A17E;
		font-size: 40rpx;
		margin-bottom: 20rpx;
	}

	.index-time .time-buttons {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.index-time .time-buttons .btn {
		width: 20%;
		font-size: 28rpx;
		padding: 0;
		height: 70rpx;
		line-height: 70rpx;
		color: #FFF;
		background-color: #06A17E;
	}

	.index-time .time-text {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12rpx 10rpx;
		box-sizing: border-box;
		background-color: #06A17E;
		color: #fff;
		margin-top: 30rpx;
		border-radius: 10rpx;
		box-shadow: 0px 2px 2px #ccc;
	}

	.index-time .time-text .text-left {
		width: 50%;
		font-size: 38rpx;
	}

	.index-time .time-text .text-left text {
		font-weight: bold;
		font-size: 48rpx;
		text-shadow: 0px 2px 2px #000;
	}

	.index-time .time-text .text-right {
		width: 50%;
		display: flex;
	}

	.index-time .time-text .text-right .btn {
		padding: 0;
		color: #fff;
		background-color: #06D19F;
		font-size: 30rpx;
		padding: 6rpx 20rpx;
		border-radius: 80rpx;
		box-shadow: 0px 0px 2px #fff;
	}

	.index-time .time-chartor {
		padding: 30rpx 0rpx;
		text-align: center;
		font-size: 60rpx;
	}

	.index-save {
		width: 100%;
		margin-bottom: 20rpx;

		.btn-save {
			border: 1px solid #06A17E;
			color: #06A17E;
			background-color: transparent;
			width: 100%;
			margin: 0;
			padding: 0;
			height: 100rpx;
			line-height: 100rpx;
		}

		.btn1 {
			border: 1px solid #06A17E;
			color: #06A17E;
		}

		.btn2 {
			border: 1px solid #FF5500;
			color: #FF5500;
		}
	}
</style>

<template>
	<view class="usage" v-if="isShowUsage">
		<view class="tip">使用说明(3s后自动关闭) <text @click="closeUsageFn"
				style="margin-left: 20rpx; color: #707070; font-weight:normal;font-size: 30rpx;">跳过</text></view>
		<image src="/static/usage.jpg" mode="widthFix" class="img"></image>
	</view>
	<view class="index">
		<!-- 头部 -->
		<view class="index-header">
			<view class="header-top">
				<view class="top-left t">{{redTeam}}</view>
				<view class="t">:</view>
				<view class="top-right t">{{blueTeam}}</view>
			</view>
			<view class="header-bottom">
				<view class="top-left t">{{redTeamScore}}</view>
				<view class="t">:</view>
				<view class="top-right t">{{blueTeamScore}}</view>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="index-button">
			<view class="button-left w-50">
				<button @click="calcScore" data-team="red" data-score="1" class="btn-red" hover-class="none">+1</button>
				<button @click="calcScore" data-team="red" data-score="2" class="btn-red" hover-class="none">+2</button>
				<button @click="calcScore" data-team="red" data-score="3" class="btn-red" hover-class="none">+3</button>
				<button @click="calcScore" data-team="red" data-score="-1" class="btn-red"
					hover-class="none">-1</button>
			</view>
			<view class="button-right w-50">
				<button @click="calcScore" data-team="blue" data-score="1" class="btn-blue"
					hover-class="none">+1</button>
				<button @click="calcScore" data-team="blue" data-score="2" class="btn-blue"
					hover-class="none">+2</button>
				<button @click="calcScore" data-team="blue" data-score="3" class="btn-blue"
					hover-class="none">+3</button>
				<button @click="calcScore" data-team="blue" data-score="-1" class="btn-blue"
					hover-class="none">-1</button>
			</view>
		</view>

		<!-- 控制加减次数 -->
		<view class="index-num">
			<view class="num-left">
				<!-- 犯规次数(红队) -->
				<view class="box">
					<view class="l">
						<button @click="calcFoul" data-team="red" data-foul="sub" class="btn"
							hover-class="none">-</button>
					</view>
					<view class="c">
						犯规次数: <text>{{redFoul}}</text>
					</view>
					<view class="r">
						<button @click="calcFoul" data-team="red" data-foul="add" class="btn"
							hover-class="none">+</button>
					</view>
				</view>
				<!-- 暂停次数(红队) -->
				<view class="box box-2">
					<view class="l">
						<button @click="calcPause" data-team="red" data-pause="sub" class="btn"
							hover-class="none">-</button>
					</view>
					<view class="c">
						暂停次数: <text>{{redPause}}</text>
					</view>
					<view class="r">
						<button @click="calcPause" data-team="red" data-pause="add" class="btn"
							hover-class="none">+</button>
					</view>
				</view>
			</view>

			<view class="num-right">
				<!-- 犯规次数（蓝队） -->
				<view class="box">
					<view class="l">
						<button @click="calcFoul" data-team="blue" data-foul="sub" class="btn"
							hover-class="none">-</button>
					</view>
					<view class="c">
						犯规次数: <text>{{blueFoul}}</text>
					</view>
					<view class="r">
						<button @click="calcFoul" data-team="blue" data-foul="add" class="btn"
							hover-class="none">+</button>
					</view>
				</view>
				<!-- 暂停次数(蓝队) -->
				<view class="box box-2">
					<view class="l">
						<button @click="calcPause" data-team="blue" data-pause="sub" class="btn"
							hover-class="none">-</button>
					</view>
					<view class="c">
						暂停次数: <text>{{bluePause}}</text>
					</view>
					<view class="r">
						<button @click="calcPause" data-team="blue" data-pause="add" class="btn"
							hover-class="none">+</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 比赛计时间 -->
		<view class="index-time">
			<view class="time-title">比赛计时</view>
			<view class="time-buttons">
				<button hover-class="none" class="btn" data-time="5" @click="setTimeFn">5分钟</button>
				<button hover-class="none" class="btn" data-time="10" @click="setTimeFn">10分钟</button>
				<button hover-class="none" class="btn" data-time="12" @click="setTimeFn">12分钟</button>
				<button hover-class="none" class="btn" data-time="15" @click="setTimeFn">15分钟</button>
			</view>
			<view class="time-text">
				<view class="text-left">
					时间: <text>{{downTimeValue}}</text>
				</view>
				<view class="text-right">
					<button hover-class="none" class="btn" @click="pauseFn">暂停时间</button>
					<button hover-class="none" class="btn" @click="startFn">开始计时</button>
				</view>
			</view>
			<view class="time-chartor">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}</view>
				</picker>
			</view>


		</view>


		<!-- 保存比赛信息的按钮 -->
		<view class="index-save">
			<button class="btn-save btn1" @click="saveInfo">点击保存当前比赛信息</button>
		</view>


		<view class="index-save">
			<button class="btn-save btn2" @click="showUsageFn">使用说明</button>
		</view>


		<!-- 自定义组件 -->
		<my-toggle @send-show="showDialog" @reset-info="resetInfoFn" @save-info="saveInfoAllFn"></my-toggle>

		<!-- 输入弹窗 -->
		<my-dialog v-if="isShow" @send-hide="showDialog" @send-info="saveTeamInfo"></my-dialog>
		
		
		<!-- 比赛记录 -->
		<view class="race-list" v-if="info.result.length != 0">
			<view class="ul">
				<view class="li">
					<view class="li-top">
						<view class="red">{{info.red_team}}</view>
						<view class="score">
							<!-- <text class="text">{{info.red_total}}</text> -->
							<text class="text">-</text>
							<!-- <text class="text">{{info.blue_total}}</text> -->
						</view>
						<view class="blue">{{info.blue_team}}</view>
					</view>
					<view class="li-bottom">{{info.datetime}}</view>
					<!-- 下拉列表 -->
					<view class="li-list">
						<view class="list-list-opt" v-for="opt in info.result">
							<view class="item-title">{{opt.chapter}}</view>
							<view class="item-box">
								<view class="item-box-left">
									<view>得分:{{opt.red.score}}</view>
									<view>犯规次数:{{opt.red.foul}}</view>
									<view>暂停次数:{{opt.red.pauseCount}}</view>
								</view>
								<view class="item-box-right">
									<view>得分:{{opt.blue.score}}</view>
									<view>犯规次数:{{opt.blue.foul}}</view>
									<view>暂停次数:{{opt.blue.pauseCount}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入组件
	import myToggleVue from '../../components/my-toggle.vue';
	import myDialogVue from '../../components/my-dialog.vue';

	// 导入操作云数据的方法
	import {
		addRaceInfo
	} from '../../db/index'

	// 导入工具对象
	import util from '../../utils/util';

	// 编写格式化倒计时的时间函数
	const formatdownTime = (seconds) => {
		let h = 0,
			m = 0,
			s = 0;
		h = Math.floor(seconds / 3600);
		m = Math.floor(seconds % 3600 / 60);
		s = Math.floor(seconds % 60);
		return `${util.formatNumber(h)}:${util.formatNumber(m)}:${util.formatNumber(s)}`
	}
	let d = null;
	export default {
		// 注册组件
		components: {
			'my-toggle': myToggleVue,
			'my-dialog': myDialogVue
		},
		data() {
			return {
				isShowUsage: true,
				isShow: false,
				redTeam: '红队',
				blueTeam: '蓝队',
				redTeamScore: 0,
				blueTeamScore: 0,
				redFoul: 0,
				blueFoul: 0,
				redPause: 0,
				bluePause: 0,
				time: 5, // 比赛的分钟数据
				dingshiqi: null,
				chapter: 1,
				downTimeValue: '00:05:00',
				seconds: 5 * 60, // 比赛的秒数
				array: ['第1节', '第2节', '第3节', '第4节', '加时赛1', '加时赛2'],
				index: 0,
				info: { // 记录当前这一节比赛的信息
					result: []
				},
				isStart: false,

			}
		},
		// 钩子（回调函数）
		onLoad() {
			// 初始化
			if (uni.getStorageSync('USAGE_FIRST')) {
				this.isShowUsage = false;
			} else {
				d = setTimeout(() => {
					this.isShowUsage = false;
					d = null;
				}, 3000)
				uni.setStorageSync('USAGE_FIRST', 1)
			}
		},

		methods: {
			
			closeUsageFn() {
				this.isShowUsage = false;
			},
			showUsageFn() {
				clearTimeout(d);
				this.isShowUsage = true;
				// 初始化
				d = setTimeout(() => {
					this.isShowUsage = false;
					d = null;
				}, 3000)
			},
			// 选择第几节比赛
			bindPickerChange: function(e) {
				// console.log('索引值:', e.detail.value)
				this.index = e.detail.value
			},

			// 显示输入弹窗
			// 编写方法接收子组件传递过来的值
			showDialog(option) {
				this.isShow = option.isShow;
			},
			// 编写方法接收子组件传递的参数
			saveTeamInfo(option) {
				this.redTeam = option.redName
				this.blueTeam = option.blueName
				this.isShow = option.isShow
			},
			// 编写方法计算分数
			calcScore(event) {
				if (!this.isStart) {
					uni.showToast({
						title: '比赛还没开始哦',
						icon: 'none'
					})
					return
				}
				// console.log(event);
				// 获取分数
				let score = event.currentTarget.dataset.score - 0; // 转number
				let team = event.currentTarget.dataset.team;
				// 判断给那只队伍添加分数
				if (team == 'red') {
					if (this.redTeamScore < 0 ) return false;
					if(this.redTeamScore == 0 && score == -1) return false;
					this.redTeamScore += score;
				} else {
					if (this.blueTeamScore < 0) return false;
					if(this.blueTeamScore == 0 && score == -1) return false;
					this.blueTeamScore += score;
				}
			},
			
			// 编写方法计算犯规次数
			calcFoul(event) {
				if (!this.isStart) {
					uni.showToast({
						title: '比赛还没开始哦',
						icon: 'none'
					})
					return
				}
				// console.log(event);
				// 获取布尔值
				let foul = event.currentTarget.dataset.foul; // sub 表示-1   add 表示 +1
				let team = event.currentTarget.dataset.team;
				// console.log({foul , team })
				// 判断给那只队伍添加分数
				if (team == 'red') {
					if (foul == 'sub') {
						if (this.redFoul <= 0) {
							return false;
						}
						this.redFoul -= 1;
					}
					if (foul == 'add') {
						this.redFoul += 1;
						// debugger;
					}
				}
				if(team == 'blue'){
					if (foul == 'sub') {
						if (this.blueFoul <= 0) {
							return false;
						}
						this.blueFoul -= 1;
					}
					if (foul == 'add') {
						this.blueFoul += 1;
					}
				}
			},
			// 编写方法计算暂停次数
			calcPause(event) {
				if (!this.isStart) {
					uni.showToast({
						title: '比赛还没开始哦',
						icon: 'none'
					})
					return
				}
				// console.log(event);
				// 获取布尔值
				let pause = event.currentTarget.dataset.pause; // sub 表示-1   add 表示 +1
				let team = event.currentTarget.dataset.team;
				// console.log({pause , team })
				// 判断给那只队伍添加分数
				if (team == 'red') {
					if (pause == 'sub') {
						if (this.redPause <= 0) {
							return false;
						}
						this.redPause -= 1;
					}
					if (pause == 'add') {
						this.redPause += 1;
						if (this.redPause > 2) {
							uni.showToast({
								title: `暂停次数超过2次`,
								icon: 'error'
							})
							this.redPause = 2;
						}
					}
				} else {
					if (pause == 'sub') {
						if (this.bluePause <= 0) {
							return false;
						}
						this.bluePause -= 1;
					}
					if (pause == 'add') {
						this.bluePause += 1;
						if (this.bluePause > 2) {
							uni.showToast({
								title: `暂停次数超过2次`,
								icon: 'error'
							})
							this.bluePause = 2;
						}
					}
				}
			},
			// 设置倒计时
			setTimeFn(event) {
				if (this.isStart) return;
				this.time = (event.currentTarget.dataset.time) - 0;
				this.seconds = this.time * 60;
				this.downTimeValue = formatdownTime(this.seconds);
			},
			startFn() {
				if (this.dingshiqi) clearInterval(this.dingshiqi);
				// 判断比赛时间是否结束
				if (this.seconds < 0) {
					return false;
				}
				// 设置开始比赛
				this.isStart = true;
				// this.seconds = this.time * 60;
				this.downTimeValue = formatdownTime(this.seconds);
				this.dingshiqi = setInterval(() => {
					this.seconds--;
					if (this.seconds < 0) {
						clearInterval(this.dingshiqi);
						// 设置比赛结束
						this.isStart = false;
						uni.showToast({
							title: "比赛结束！"
						})
						// 短振动
						uni.vibrateShort({
							success: function() {
								console.log('成功触发短振动');
							},
							fail: function() {
								console.log('触发短振动失败');
							}
						})

						return false;
					}
					this.downTimeValue = formatdownTime(this.seconds);
				}, 1000)
			},
			pauseFn() {
				// 设置暂停比赛
				this.isStart = false;
				clearInterval(this.dingshiqi)
			},
			// 重置比赛信息
			resetInfoFn() {
				if (this.dingshiqi) clearInterval(this.dingshiqi);
				// console.log("执行了 123123")
				this.redTeam = '红队',
					this.blueTeam = '蓝队',
					this.redTeamScore = 0,
					this.blueTeamScore = 0,
					this.redFoul = 0,
					this.blueFoul = 0,
					this.redPause = 0,
					this.bluePause = 0,
					this.time = 5, // 比赛的分钟数据
					this.dingshiqi = null,
					this.chapter = 1,
					this.downTimeValue = '00:05:00',
					this.seconds = 5 * 60 // 比赛的秒数
				this.info = {
						result: []
					},
					this.isStart = false;
				this.index = 0;

				// 删除本地存储
				if (uni.getStorageSync('PREV_RED_SCORE')) uni.removeStorageSync('PREV_RED_SCORE')
				if (uni.getStorageSync('PREV_BLUE_SCORE')) uni.removeStorageSync('PREV_BLUE_SCORE')

				if (uni.getStorageSync('PREV_RED_FOUL')) uni.removeStorageSync('PREV_RED_FOUL')
				if (uni.getStorageSync('PREV_BLUE_FOUL')) uni.removeStorageSync('PREV_BLUE_FOUL')

				// if(uni.getStorageSync('PREV_RED_PAUSE')) uni.removeStorageSync('PREV_RED_PAUSE')
				// if(uni.getStorageSync('PREV_BLUE_PAUSE')) uni.removeStorageSync('PREV_BLUE_PAUSE')
			},
			// 点击保存当前这一节比赛信息
			saveInfo() {
				// 点击保存时（ 整合数据）
				let result = this.info.result || [];
				// 定义计数器变量
				let redScore = this.redTeamScore;
				let blueScore = this.blueTeamScore;

				let redFoul = this.redFoul;
				let blueFoul = this.blueFoul;
				

				// 判断是否为第一节
				if (this.index == 0) {
					
					// redScore = this.redTeamScore;
					// blueScore = this.blueTeamScore;
					
					// redFoul = this.redFoul;
					// blueFoul = this.blueFoul;
					
					uni.setStorageSync("PREV_RED_SCORE", this.redTeamScore)
					uni.setStorageSync("PREV_BLUE_SCORE", this.blueTeamScore)

					uni.setStorageSync("PREV_RED_FOUL", this.redFoul)
					uni.setStorageSync("PREV_BLUE_FOUL", this.blueFoul)

				} else {
					let PREV_RED_SCORE = uni.getStorageSync('PREV_RED_SCORE') - 0;
					let PREV_BLUE_SCORE = uni.getStorageSync('PREV_BLUE_SCORE') - 0;

					let PREV_RED_FOUL = uni.getStorageSync('PREV_RED_FOUL') - 0;
					let PREV_BLUE_FOUL = uni.getStorageSync('PREV_BLUE_FOUL') - 0;


					if (PREV_RED_SCORE) {
						redScore = this.redTeamScore - PREV_RED_SCORE;
					}
					if(PREV_BLUE_SCORE){
						blueScore = this.blueTeamScore - PREV_BLUE_SCORE;
					}

					if (PREV_RED_FOUL) {
						redFoul = this.redFoul - PREV_RED_FOUL;
						
					}
					if(PREV_BLUE_FOUL) {
						blueFoul = this.blueFoul - PREV_BLUE_FOUL;
					}

					// 更新缓存
					uni.setStorageSync("PREV_RED_SCORE", this.redTeamScore)
					uni.setStorageSync("PREV_BLUE_SCORE", this.blueTeamScore)

					uni.setStorageSync("PREV_RED_FOUL", this.redFoul)
					uni.setStorageSync("PREV_BLUE_FOUL", this.blueFoul)

				}

				// 这是每一节比赛的信息
				let itemInfo = {
					time: this.time, // 多长时间
					chapter: this.array[this.index], // 第几节比赛
					datetime: util.formatTime(new Date()), // 时间日期
					red: {
						name: this.redTeam,
						score: redScore,
						foul: redFoul,
						pauseCount: this.redPause
					},
					blue: {
						name: this.blueTeam,
						score: blueScore,
						foul: blueFoul,
						pauseCount: this.bluePause
					}
				}


				result[this.index] = itemInfo;
				this.info.red_total = this.redTeamScore;
				this.info.blue_total = this.blueTeamScore;
				this.info.red_team = this.redTeam;
				this.info.blue_team = this.blueTeam;
				this.info.redFoul = this.redFoul;
				this.info.blueFoul = this.blueFoul;
				this.info.redPause = this.redPause;
				this.info.bluePause = this.bluePause;
				// console.log("-->", this.info);

				// 保存了每一节信息后重置暂停次数
				this.redPause = 0;
				this.bluePause = 0;
				
				// 当前这一节信息保存之后
				if (this.seconds <= 0) {
					this.index += 1;
					if (this.index > this.array.length - 1) {
						this.index = this.array.length - 1;
					}
				}

				uni.showToast({
					title: '暂时保存比赛记录',
					icon: 'none'
				})
			},
			// 点击保存当前这所有比赛信息
			async saveInfoAllFn() {
				// 判断当前这场比赛是否开始
				if (!this.isStart) {
					uni.showToast({
						title: '比赛还没开始哦',
						icon: 'none'
					})
					return;
				}
				this.info.datetime = util.formatTime(new Date());
				// 把数据添加到云数据
				uni.showLoading({
					title: '正在保存数据...'
				})
				await addRaceInfo(this.info).then(
					errCode => {
						if (errCode == 0) {
							uni.showToast({
								title: '保存成功'
							})
							// 重置数据
							// this.resetInfoFn();
						}
					}
				)
				uni.hideLoading();
			}
		}
	}
</script>